<template>
<div class="noHtml">
<div class="container">
  <div class="logo">温馨提示！</div>
  <div class="tip"> 抱歉，本站采用HTML5标准制作，您的浏览器版本太低将无法正常浏览该网站，建议您立即使用如下主流浏览器访问</div>
  <ul class="list">
    <li> <a href="http://firefox.com.cn/" target="_blank"> <img src="@/assets/images/firefox.png" border="0" height="80" width="82">
      <p class="name">火狐浏览器</p>
      </a> </li>
    <li> <a href="http://www.google.cn/intl/zh-CN/chrome/browser/" target="_blank"> <img src="@/assets/images/chrome.png" border="0" height="80" width="80">
      <p class="name">谷歌浏览器</p>
      </a> </li>
    <li> <a href="http://chrome.360.cn/" target="_blank"> <img src="@/assets/images/ie.png" border="0" height="80" width="80">
      <p class="name">360浏览器</p>
      </a> </li>
    <li> <a href="http://www.apple.com.cn/safari/" target="_blank"> <img src="@/assets/images/safari.png" border="0"  height="80" width="80">
      <p class="name">苹果浏览器</p>
      </a> </li>
    <li> <a href="http://www.opera.com/zh-cn/" target="_blank"> <img src="@/assets/images/opera.png" border="0" height="80" width="80">
      <p class="name">欧朋浏览器</p>
      </a> </li>
  </ul>
  <div class="slogan">专业的网站建设平台</div>
  </div>
</div>
</template>
<style scoped lang="scss"  rel="stylesheet/scss" >
li { list-style: none; }
.noHtml { background: #202c3d ;height: 100vh;}
.container { padding: 50px 0 0 50px; }
.container .tip { line-height: 24px; font-size: 18px; color: #EEE; text-align: center }
.logo { margin-bottom: 30px; text-align: center; font-size:28px; color:#fff; }
.slogan { font-size: 18px; text-align: center; padding-bottom: 20px; padding-top: 20px; color: #FFF; line-height: 36px; }
.list { margin-top: 20px; *zoom:1;
padding: 30px 0; text-align: center }
.list:after { display: table; content: ''; clear: both; }
.list li { display: inline-block; width: 85px; margin-right: 30px; *display: inline;
text-align: center }
.list li { *display: inline;
}
.list li a { display: inline-block; text-decoration: none; color: #EEE; }
.list .name { margin-top: 10px; font-size: 14px; }
.footer { margin-top: 50px; color: #666; font-size: 12px; text-align: center; width: 800px; margin-left: auto; margin-right: auto; }
.contact { text-align: center; padding-bottom: 60px; color: #FFF; }
.contact .button { display: inline-block; background: #398fcb; padding: 10px 30px; font-size: 14px; text-decoration: none; color: #FFF; margin-bottom: 20px; border-radius: 3px }
.contact .call { font-size: 16px; }
</style>